<template>
  <div class="container">
    <topTitle
      :titleText="projectName"
      :back="back"
      @gobackTriser="goback"
    ></topTitle>
    <div class="mainCon" id="niceScroll">
      <el-row>
        <el-button
          class="commonBut saveBtn funComBut"
          icon="icon iconfont iconbianji"
          @click="editCashDeposit"
          v-show="isShowUpdate"
          >修改</el-button
        >
      </el-row>
      <div class="commomPaddingComtainer">
        <div class="imgs">
          <img
            v-show="status === 'DATESTART'"
            src="../../../static/img/deposit/effective.png"
            alt=""
          />
          <img
            v-show="status === 'DATEEND'"
            src="../../../static/img/deposit/failure.png"
            alt=""
          />
        </div>
        <el-row>
          <span class="labelWidth">项目名称：</span>
          <span class="information">{{ projectName || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">缴纳单位：</span>
          <span class="information">{{ companyName || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">缴纳日期：</span>
          <span class="information">{{ operationDate || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">缴纳方式：</span>
          <span class="information specialColor">{{ method || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">应缴金额：</span>
          <span class="information specialColor"
            >{{ shouldPayTotal != null ? shouldPayTotal : '--' }}元</span
          >
        </el-row>
        <el-row>
          <span class="labelWidth">担保金额：</span>
          <span class="information specialColor"
            >{{ payTotal != null ? payTotal : '--' }}元</span
          >
        </el-row>
        <el-row>
          <span class="labelWidth">担保机构：</span>
          <span class="information">{{ guaranteeName || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">担保生效日：</span>
          <span class="information specialColor">{{
            guaranteeStartDate || '--'
          }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">担保到期日：</span>
          <span class="information specialColor">{{
            guaranteeEndDate || '--'
          }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">业务办理人：</span>
          <span class="information">{{ operator || '--' }}</span>
        </el-row>
        <el-row>
          <span class="labelWidth">缴纳原因：</span>
          <span class="information">{{ remark || '--' }}</span>
        </el-row>
        <el-row>
          <el-col :span="1.5">
            <span class="labelWidth">合同附件：</span>
          </el-col>
          <el-col :span="19">
            <elementImage
              :upLoadFile="upLoadFile"
              :fileMarginLeft="fileMarginLeft"
              :srcList="srcList"
              :oldSrcList="oldSrcList"
              :isDelFile="isDelFile"
              @changeSrcList="changeSrcList"
            ></elementImage>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cashDepositDetail',

  data() {
    return {
      isDelFile: false,
      back: true,
      projectName: '',
      companyName: '',
      operationDate: '',
      method: '',
      shouldPayTotal: '',
      payTotal: '',
      guaranteeName: '',
      guaranteeStartDate: '',
      guaranteeEndDate: '',
      operator: '',
      remark: '',
      status: '',
      upLoadFile: [], //缴纳凭证
      srcList: [],
      oldSrcList: [],
      cashDepositId: '', //保证金id
      isShowUpdate: '',
      fileMarginLeft: '0', //详情文件居左样式
    }
  },
  created() {
    this.cashDepositId = this.$route.query.cashDepositId
    //获取详情数据
    this.getCashDepositInfo()
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('depositList:update') > -1
  },
  mounted() {
    // $("#niceScroll").niceScroll({
    //     cursorwidth: "10px",
    //     cursoropacitymax: 0.5
    // });
  },
  methods: {
    /**
     * @description: 改变图片地址
     */
    changeSrcList(val) {
      this.srcList = val
    },
    goback() {
      this.$router.push('/home/cashDeposit/cashDepositList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getCashDepositInfo() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.cashDepositId,
        },
      })
        .then((response) => {
          var data = response.data.result
          this.projectName = data.projectName
          this.companyName = data.companyName
          this.operationDate = data.operationDate
          this.method = data.methodDesc
          this.shouldPayTotal = data.shouldPayTotal
          this.payTotal = data.payTotal
          this.guaranteeName = data.guaranteeName
          this.guaranteeStartDate = data.guaranteeStartDate
          this.guaranteeEndDate = data.guaranteeEndDate
          this.operator = data.operator
          this.remark = data.remark
          //状态标志图片
          this.status = data.status
          this.upLoadFile = data.file
          for (var i = 0; i < this.upLoadFile.length; i++) {
            this.srcList.push(this.upLoadFile[i].url)
            this.oldSrcList.push(this.upLoadFile[i].url)
          }
        })
        .catch((error) => {})
    },
    //跳转保证金修改
    editCashDeposit() {
      this.$router.push({
        path: '/home/cashDeposit/cashDepositEdit/',
        name: 'cashDepositEdit',
        query: {
          cashDepositId: this.cashDepositId,
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .mainCon {
    top: 198px;
    .commomPaddingComtainer {
      position: relative;
      margin-top: 24px;
      width: 872px;
      background: #f5f7fb;
      border-radius: 4px;
      border-radius: 4px;
      padding: 30px 24px 50px 24px;
      .labelWidth {
        width: 100px;
        font-size: 14px;
        text-align: right;
        color: #333333;
        display: inline-block;
        height: 36px;
      }
      .information {
        font-size: 14px;
        color: #666666;
      }
      .specialColor {
        color: #009588;
        font-weight: bold;
      }
      .imgs {
        position: absolute;
        top: -40px;
        left: 724px;
        width: 350px;
        img {
          width: 172px;
          height: 123px;
        }
      }
      .imgStyle {
        margin-left: 16px;
        li {
          position: relative;
          margin-right: 20px;
          margin-top: 10px;
          i {
            position: absolute;
            right: -6px;
            top: -10px;
            font-size: 20px;
          }
        }
      }
    }
  }
}
</style>
